.logo{
  position: relative;
  width: 100px;
  height: 100px;
  // border: 4px solid black;
  box-sizing: border-box;
  background-color: white;
  &>div{
    position: absolute;
  }
  .red{
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    border-right: 4px solid black;
    background-color:#ea5664;
    animation: red linear 1.5s infinite alternate;
  }

  &::before,&::after{
    content:' ';
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid transparent;
    animation-timing-function: linear;
  }
  &::before{
    top: 0;
    left: 0;
    border-top-color: black;
    border-right-color: black;
    animation:border-before 1s infinite;
    animation-direction: alternate;
  }

  &::after{
    bottom: 0;
    right: 0;
    border-bottom-color: red;
    border-left-color: red;
    animation:border-after infinite 1s;
    animation-direction: alternate;
  }
}

@keyframes border-before{
  0%{
    width: 0;
    height: 0;
    border-right-color: transparent;
  }
  12.51%{
    border-right-color: transparent;
  }
  12.5%{
    height: 0;
    width: 100%;
    border-right-color: black;
  }
  25%,100%{
    width: 100%;
    height: 100%;
  }
}

@keyframes border-after{
  0%,25%{
    width: 0;
    height: 0;
    border-left-color: transparent;
    border-bottom-color: transparent;
  }
  24.99%{
    border-left-color: transparent;
  }
  25%{
    height: 0;
    width: 100%;
    border-left-color: red;
  }
  100%{
    width: 100%;
    height: 100%;
  }
}

@keyframes red{
  0%,50%{
    width: 0;
    opacity: 0;
  }
  50.01%{
    opacity: 1;
  }
  65%,100%{
    width: 27%;
    opacity: 1;
  }
}